---
title: Migrando desde SvelteKit
description: Consejos para migrar un proyecto existente de SvelteKit a Astro
type: migration
stub: true
framework: SvelteKit
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[SvelteKit](https://kit.svelte.dev) es un framework para construir aplicaciones web sobre Svelte.

## Principales similitudes entre SvelteKit y Astro

SvelteKit y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

- SvelteKit y Astro son generadores de sitios estáticos y frameworks de renderizado del lado del servidor en JavaScript moderno. 

- SvelteKit y Astro usan la [carpeta `src/` para los archivos de tu proyecto](/es/basics/project-structure/#src) y una [carpeta especial para enrutamiento basado en archivos](/es/basics/astro-pages/). Crear y administrar páginas para tu sitio debería ser familiar.

- Astro tiene [una integración oficial para utilizar componentes de Svelte](/es/guides/integrations-guide/svelte/) y admite [la instalación de paquetes NPM](/es/guides/imports/#paquetes-npm), incluyendo varios para Svelte. Podrás escribir componentes de UI en Svelte, y tal vez podrás conservar algunos o todos tus componentes y dependencias existentes.

- Astro y SvelteKit te permiten usar un [headless CMS, APIs or archivos Markdown para los datos](/es/guides/data-fetching/). Podrás seguir utilizando tu sistema preferido de [creación de contenido](/es/guides/content/), y conservar tu contenido existente.

## Principales diferencias entre SvelteKit y Astro

Cuando reconstruyas tu sitio de SvelteKit a Astro, notarás algunas diferencias importantes:

- Los sitios de Astro son aplicaciones de varias páginas, mientras que en SvelteKit se enfoca en aplicaciones de una sola página (SPA) con renderizado en el lado del servidor, pero también puede crear aplicaciones de varias páginas (MPA), SPAs tradicionales, o mezclar y combinar estas técnicas dentro de una misma aplicación.

- [Componentes](/es/basics/astro-components/): SvelteKit usa [Svelte](https://svelte.dev). Las páginas de Astro se construyen utilizando [componentes `.astro`](/es/basics/astro-components/), pero también puede admitir [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/es/guides/framework-components/) y plantillas HTML sin procesar.

- [Orientado al contenido](/es/concepts/why-astro/#orientado-al-contenido): Astro fue diseñado para mostrar tu contenido y permitirte optar por la interactividad solo cuando sea necesario. Una aplicación existente de SvelteKit puede estar construida para una alta interactividad del lado del cliente. Astro tiene capacidades integradas para trabajar con tu contenido, como la generación de páginas, pero puede requerir técnicas avanzadas de Astro para incluir elementos que son más difíciles de replicar utilizando componentes `.astro`, como los paneles de control.

- [Preparado para Markdown](/es/guides/markdown-content/): Astro incluye soporte integrado para Markdown, y incluye una [propiedad especial `layout` de YAML frontmatter](/es/basics/layouts/#plantillas-de-markdownmdx) utilizada por archivo para la plantilla de la página. Si estás convirtiendo un blog de SvelteKit basado en Markdown, no tendrás que instalar una integración de Markdown separada ni establecer una plantilla mediante un archivo de configuración. Puedes llevar tus archivos Markdown existentes, pero es posible que debas reorganizarlos ya que la navegación basada en archivos de Astro no requiere una carpeta para cada ruta de página.


## Migrar desde SvelteKit a Astro

Para migrar un blog de SvelteKit a Astro, empieza con nuestra plantilla inicial para blogs, o explora más temas de la comunidad para blogs en nuestro [catálogo de temas](https://astro.build/themes/).

Puedes pasar el argumento `--template` al comando `create astro` para empezar un nuevo proyecto de Astro con una de nuestras plantillas oficiales. O, puedes [comenzar un nuevo proyecto desde cualquier repositorio de Astro existente en GitHub](/es/install/auto/#plantillas-de-inicio).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Lleva tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para [crear páginas en Markdown o MDX](/es/guides/markdown-content/).

Aunque el enrutamiento basado en archivos y los components de diseño son similares en Astro, es posible que desees leer acerca de la [estructura de proyectos de Astro](/es/basics/project-structure/) para aprender dónde deben ubicarse los archivos.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, mira más plantillas oficiales de inicio en [astro.new](https://astro.new). Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un solo clic para abrir un proyecto de trabajo en los entornos de desarrollo en línea de StackBlitz, CodeSandbox y Gitpod.

## Recursos de la Comunidad

- Artículo de blog: [Reescribiendo mi blog de SvelteKit a Astro](https://kharann.com/blog/rewriting-my-blog/)

- ¡Añade el tuyo!
